<template name="adminInvites">
	<div class="main-content-flex">
		<section class="page-container page-list flex-tab-main-content">
			{{> header sectionName="Invites"}}
			<div class="content">
				{{#unless hasPermission 'create-invite-links'}}
				<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
				{{else}}
				<div class="results">
					{{{_ "Showing_results" invites.length}}}
				</div>
					{{#table fixed='true' onItemClick=onTableItemClick onScroll=onTableScroll onResize=onTableResize}}
					<thead>
						<tr class="admin-table-row">
							<th class="content-background-color border-component-color" width="20%">
								<div class="table-fake-th">{{_ "Token"}}</div>
							</th>
							<th class="content-background-color border-component-color" width="35%">
								<div class="table-fake-th">{{_ "Created_at"}}</div>
							</th>
							<th class="content-background-color border-component-color" width="20%">
								<div class="table-fake-th">{{_ "Expiration"}}</div>
							</th>
							<th class="content-background-color border-component-color" width="10%">
								<div class="table-fake-th">{{_ "Uses"}}</div>
							</th>
							<th class="content-background-color border-component-color" width="15%">
								<div class="table-fake-th">{{_ "Uses_left"}}</div>
							</th>
						</tr>
					</thead>
					<tbody>
						{{#each invites}}
						<tr class="invites-info row-link admin-table-row">
							<td class="border-component-color">
								<div class="rc-table-wrapper">
									<div class="rc-table-info">
										<span class="rc-table-title">{{_id}}</span></div>
								</div>
							</td>
							<td class="border-component-color">
								<div class="rc-table-wrapper">
									<div class="rc-table-info">
										<span class="rc-table-title">{{formatDateAndTime createdAt}}</span></div>
								</div>
							</td>
							<td class="border-component-color">
								<div class="rc-table-wrapper">
									<div class="rc-table-info">
										<span class="rc-table-title">{{daysToExpire}}</span></div>
								</div>
							</td>
							<td class="border-component-color">
								<div class="rc-table-wrapper">
									<div class="rc-table-info">
										<span class="rc-table-title">{{uses}}</span></div>
								</div>
							</td>
							<td class="border-component-color">
								<div class="rc-table-wrapper">
									<div class="rc-table-info">
										<span class="rc-table-title">{{maxUsesLeft}}</span></div>


								<button class="rc-apps-section__app-menu-trigger js-remove" data-id="{{_id}}">
									<svg class="rc-icon rc-icon--default-size rc-icon--default-size--menu" aria-hidden="true">
										<use xlink:href="#icon-cross"></use>
									</svg>
								</button>
							</div>
							</td>
						</tr>
						{{/each}}
					</tbody>
					{{/table}}
				{{/unless}}
			</div>
		</section>
	</div>
</template>
